<template>
    <div id="rule-locate">
        <el-table :data="props.rules" @row-click="handleRowClick">
            <el-table-column prop="rule_id" label="规则ID"></el-table-column>
            <el-table-column prop="description" label="规则描述"></el-table-column>
        </el-table>
    </div>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue';

// 从主组件中获得传递过来的 props，是一个数组，里面是对象，有两个字段，rule_id 和 description
const props = defineProps({
    rules: {
        type: Array,
        required: true
    }
});

// 传出住组件的事件 locate-selected，参数是一个字符串，就是 rule_id
const emit = defineEmits(['locate-selected']);
// 点击某一行时，触发 locate-selected 事件，参数是该行的 rule_id
const handleRowClick = (row) => {
    emit('locate-selected', row.rule_id);
}
</script>

<style>
</style>